<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>电子蝴蝶标本检索</title>
    <link rel="stylesheet" href="styles.css">
</head>

<body>
<header>
    <div>
        <img src="images/logo/logo.png" alt="Logo" height="50">
    </div>
    <nav>
        <ul>
            <li><a href="#">首页</a></li>
            <li><a href="#">概况</a></li>
            <li><a href="#">新闻</a></li>
            <li><a href="#">办展咨询</a></li>
            <li><a href="#">关于我们</a></li>
            <li><a href="#">登录/注册</a></li>
        </ul>
    </nav>
</header>

<main>
    <div class="search-container">
        <div class="search-box">
            <input type="text" placeholder="输入关键词">
            <button>搜索</button>
            <a href="#" class="advanced-search">高级检索</a>
            <div class="filter-container" id="filter-container" style="display: none;">
                <div class="filter">
                    <label for="time">发现时间</label>
                    <input type="text" id="time" placeholder="请输入关键字">
                </div>
                <div class="filter">
                    <label for="location">发现地点</label>
                    <input type="text" id="location" placeholder="请输入关键字">
                </div>
                <div class="filter">
                    <label for="feature">局部特征</label>
                    <input type="text" id="feature" placeholder="请输入关键字">
                </div>
            </div>
        </div>
    </div>

    <div class="tabs">
        <div class="tab active" data-tab="latest">最新消息</div>
        <div class="tab" data-tab="new-species">新物种发现</div>
        <div class="tab" data-tab="exhibitions">办展信息</div>
        <div class="tab" data-tab="products">文创产品</div>
        <div class="tab" data-tab="public-service">公益服务</div>
    </div>

    <div class="tab-content active" id="latest">
        <!-- 最新消息内容 -->
        <div class="exhibit-item">
            <h3>西南科技大学开办研学展</h3>
        </div>
        <div class="exhibit-item">
            <h3>2025年01月01日开发出新的文创产品</h3>
        </div>
        <a href="#" class="more-btn">更多...</a>
    </div>

    <div class="tab-content" id="new-species">
        <!-- 新物种发现内容 -->
        <div class="exhibit-item">
            <h3>2025年01月01日在西南科技大学发现新物种</h3>
        </div>
        <a href="#" class="more-btn">更多...</a>
    </div>

    <div class="tab-content" id="exhibitions">
        <!-- 办展信息内容 -->
        <div class="exhibit-item">
            <img src="images/exhibit/exhibit1.jpg" alt="展品图片1">
            <div class="actions">
                <a href="#" class="online-reservation">线上预约</a>
                <a href="#" class="online-exhibition">线上展览</a>
            </div>
        </div>
        <div class="exhibit-item">
            <img src="images/exhibit/exhibit2.jpg" alt="展品图片2">
            <div class="actions">
                <a href="#" class="online-reservation">线上预约</a>
                <a href="#" class="online-exhibition">线上展览</a>
            </div>
        </div>
        <div class="exhibit-item">
            <img src="images/exhibit/exhibit3.jpg" alt="展品图片3">
            <div class="actions">
                <a href="#" class="online-reservation">线上预约</a>
                <a href="#" class="online-exhibition">线上展览</a>
            </div>
        </div>
        <div class="exhibit-item">
            <img src="images/exhibit/exhibit4.jpg" alt="展品图片4">
            <div class="actions">
                <a href="#" class="online-reservation">线上预约</a>
                <a href="#" class="online-exhibition">线上展览</a>
            </div>
        </div>
        <a href="#" class="more-btn">更多...</a>
    </div>

    <div class="tab-content" id="products">
        <!-- 文创产品内容 -->
        <div class="product-grid">
            <div class="product">
                <img src="images/product/蝴蝶夜灯.webp" alt="蝴蝶夜灯">
                <div class="product-details">
                    <h3>蝴蝶夜灯</h3>
                    <p>全国通用 品质保障</p>
                    <p>¥1000.00</p>
                    <div class="actions">
                        <a href="#" class="purchase">购买</a>
                        <a href="#" class="after-sales">售后</a>
                    </div>
                </div>
            </div>
            <div class="product">
                <img src="images/product/蝴蝶书签.jpg" alt="蝴蝶书签">
                <div class="product-details">
                    <h3>蝴蝶书签</h3>
                    <p>全国通用 品质保障</p>
                    <p>¥10.19</p>
                    <div class="actions">
                        <a href="#" class="purchase">购买</a>
                        <a href="#" class="after-sales">售后</a>
                    </div>
                </div>
            </div>
            <div class="product">
                <img src="images/product/蝴蝶首饰.webp" alt="蝴蝶首饰">
                <div class="product-details">
                    <h3>蝴蝶首饰</h3>
                    <p>全国通用 品质保障</p>
                    <p>¥500.00</p>
                    <div class="actions">
                        <a href="#" class="purchase">购买</a>
                        <a href="#" class="after-sales">售后</a>
                    </div>
                </div>
            </div>
            <!-- 可以根据需要添加更多产品 -->
        </div>
        <a href="#" class="more-btn">更多...</a>
    </div>

    <div class="tab-content" id="public-service">
        <!-- 公益服务内容 -->
        <div class="exhibit-item">
            <h3>与牧云轩公益机构合作向西南科技大学捐赠一亿</h3>
        </div>
        <div class="exhibit-item">
            <h3>本次展览收益捐予青义镇</h3>
        </div>
        <div class="links">
            <a href="#" class="details">公益详情</a>
            <a href="#" class="volunteer service">志愿服务</a>
        </div>
    </div>
</main>

<script>
    document.addEventListener('DOMContentLoaded', function () {
        const advancedSearchLink = document.querySelector('.advanced-search');
        const filterContainer = document.getElementById('filter-container');

        advancedSearchLink.addEventListener('click', function (event) {
            event.preventDefault(); // 阻止链接的默认行为
            if (filterContainer.style.display === 'none') {
                filterContainer.style.display = 'block';
            } else {
                filterContainer.style.display = 'none';
            }
        });

        const tabs = document.querySelectorAll('.tab');
        const tabContents = document.querySelectorAll('.tab-content');

        tabs.forEach(tab => {
            tab.addEventListener('click', () => {
                // 移除所有 tab 的 active 类
                tabs.forEach(t => t.classList.remove('active'));
                // 添加当前 tab 的 active 类
                tab.classList.add('active');

                // 隐藏所有 tab 内容
                tabContents.forEach(content => content.classList.remove('active'));
                // 显示对应 tab 的内容
                const targetContent = document.getElementById(tab.dataset.tab);
                targetContent.classList.add('active');
            });
        });
    });
</script>

</body>

</html>
